<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
		<style type="text/css">
		


		.codrops-demos a.current-demo {

			color: #999;

		}

		.codrops-header h1 {

			margin-top: 50px;

			font-family: 'Microsoft Yahei';

			color: #fff;

		}

			@charset "utf8";
			*,
			*:after,
			*:before,
			html {
				box-sizing: border-box
			}
			
			a {
				text-align: center;
				text-decoration: none
			}
			
			body {
				font-family: Tahoma, Geneva, sans-serif;
				font-size: 16px;
				font-style: normal;
				font-weight: 400;
				background: #444;
			}
			
			body,
			ol {
				margin: 0;
				padding: 0
			}
			
			ol {
				list-style-type: none
			}
			
			.menu,
			.menu-item a {
				width: 100%;
				display: block;
				position: relative
			}
			
			.menu-item {
				width: 150px;
				position: relative;
				perspective: 100%;
				cursor: pointer
			}
			
			.menu-item a {
				padding: 16px 0;
				color: #fff;
				border-radius: 4px;
				transition: all .5s ease;
				transform-style: preserve-3d
			}
			
			.menu-item a:before {
				width: 100%;
				padding: 16px 0;
				display: block;
				position: absolute;
				color: #000;
				border-radius: 4px
			}
			/*                                          ! Responsive 3D Flip Menu Start Here ...
=======================================================================================================================*/
			
			.menu {
				padding: 0 16px
			}
			
			.menu>ol:first-child {
				width: 100%;
				display: flex;
				position: relative;
				flex-flow: row wrap;
				justify-content: center
			}
			
			.menu>ol:first-child>.menu-item {
				display: block
			}
			
			.menu>ol:first-child>.menu-item>a {
				background: #000;
				box-shadow: 0 8px 6px -6px #595959
			}
			
			.menu>ol:first-child>.menu-item:nth-of-type(2)>a,
			.menu>ol:first-child>.menu-item:nth-of-type(4)>a {
				border-left: 1px solid #fff;
				border-right: 1px solid #fff
			}
			
			.menu>ol:first-child>.menu-item>a:before {
				background: #ff9900;
				bottom: 90%;
				transform: rotateX(-90deg) translate3d(0, 0, 75px)
			}
			
			.menu>ol:first-child>.menu-item:nth-of-type(1)>a:before {
				content: "Home"
			}
			
			.menu>ol:first-child>.menu-item:nth-of-type(2)>a:before {
				content: "About"
			}
			
			.menu>ol:first-child>.menu-item:nth-of-type(3)>a:before {
				content: "Widgets"
			}
			
			.menu>ol:first-child>.menu-item:nth-of-type(4)>a:before {
				content: "Kabobs"
			}
			
			.menu>ol:first-child>.menu-item:nth-of-type(5)>a:before {
				content: "Contact"
			}
			
			.menu>ol:first-child>.menu-item:nth-of-type(3)>a:after,
			.menu>ol:first-child>.menu-item:nth-of-type(4)>a:after {
				content: "\0025BE";
				width: 100%;
				padding: 30px 0 0 0;
				top: 0;
				display: block;
				position: absolute;
				color: #fff;
				font-size: 20px;
				text-align: center
			}
			
			.menu>ol:first-child>.menu-item:hover>a {
				transform: rotateX(90deg)
			}
			
			.menu>ol:first-child>.menu-item:nth-of-type(3):hover>a:after,
			.menu>ol:first-child>.menu-item:nth-of-type(4):hover>a:after {
				content: "\0025B4";
				color: #000;
				transform: rotateX(-90deg) translate3d(0, 0, 75px)
			}
			
			.sub-menu {
				background: #fff;
				width: 100%;
				display: none;
				position: absolute;
				top: 51px;
				z-index: 99;
				border-top: 1px solid #fff
			}
			
			.sub-menu>.menu-item:nth-of-type(1) {
				animation: fadein-down .5s .2s ease both
			}
			
			.sub-menu>.menu-item:nth-of-type(2) {
				animation: fadein-down .7s .2s ease both
			}
			
			.sub-menu>.menu-item:nth-of-type(3) {
				animation: fadein-down .9s .2s ease both
			}
			
			@keyframes fadein-down {
				from {
					display: none;
					opacity: 0;
					transform: translateY(-10px)
				}
				to {
					display: block;
					opacity: 1;
					transform: translateY(0)
				}
			}
			
			.sub-menu>.menu-item>a {
				background: #008080
			}
			
			.sub-menu>.menu-item:nth-of-type(2)>a {
				border-top: 1px solid #fff;
				border-bottom: 1px solid #fff
			}
			
			.sub-menu>.menu-item>a:before {
				background: #bc003b;
				top: 0
			}
			
			.menu>ol:first-child>.menu-item:nth-of-type(3)>.sub-menu>.menu-item>a:before {
				transform: rotateY(-90deg) translate3d(0, 0, 75px)
			}
			
			.menu>ol:first-child>.menu-item:nth-of-type(3)>.sub-menu>.menu-item:nth-of-type(1)>a:before {
				content: "Big Widgets"
			}
			
			.menu>ol:first-child>.menu-item:nth-of-type(3)>.sub-menu>.menu-item:nth-of-type(2)>a:before {
				content: "Bigger Widgets"
			}
			
			.menu>ol:first-child>.menu-item:nth-of-type(3)>.sub-menu>.menu-item:nth-of-type(3)>a:before {
				content: "Huge Widgets"
			}
			
			.menu>ol:first-child>.menu-item:nth-of-type(3)>.sub-menu>.menu-item:hover>a {
				transform: rotateY(90deg)
			}
			
			.menu>ol:first-child>.menu-item:nth-of-type(4)>.sub-menu>.menu-item>a:before {
				transform: rotateY(90deg) translate3d(0, 0, 75px)
			}
			
			.menu>ol:first-child>.menu-item:nth-of-type(4)>.sub-menu>.menu-item:nth-of-type(1)>a:before {
				content: "Shishkabobs"
			}
			
			.menu>ol:first-child>.menu-item:nth-of-type(4)>.sub-menu>.menu-item:nth-of-type(2)>a:before {
				content: "BBQ kabobs"
			}
			
			.menu>ol:first-child>.menu-item:nth-of-type(4)>.sub-menu>.menu-item:nth-of-type(3)>a:before {
				content: "Summer kabobs"
			}
			
			.menu>ol:first-child>.menu-item:nth-of-type(4)>.sub-menu>.menu-item:hover>a {
				transform: rotateY(-90deg)
			}
			
			.menu>ol:first-child>.menu-item:hover>.sub-menu {
				display: block
			}
			
			@media screen and (min-width:321px) and (max-width:799px) {
				.menu {
					width: 320px;
					margin: auto
				}
			}
			
			@media (max-width:799px) {
				.menu>ol:first-child>.menu-item {
					width: 100%
				}
				.menu>ol:first-child>.menu-item>a {
					box-shadow: none
				}
				.menu>ol:first-child>.menu-item:nth-of-type(2)>a,
				.menu>ol:first-child>.menu-item:nth-of-type(4)>a {
					border: 1px solid #fff;
					border-left: none;
					border-right: none
				}
				.sub-menu>.menu-item {
					margin: auto
				}
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/component.css"/>
		<link rel="stylesheet" type="text/css" href="css/demo.css"/>
		<link rel="stylesheet" type="text/css" href="css/init.css"/>
		<link rel="stylesheet"type="text/css" href="css/normalize.css" />
		<script src="js/model.js"></script>
		<title></title>
	</head>

	<body>
		<nav class="menu">
			<ol>
				<li class="menu-item">
					<a href="主页.html">Home</a>
				</li>
				<li class="menu-item">
					<a href="Nine.html">FormWork</a>
				</li>
				<li class="menu-item">
					<a href="#0">Widgets</a>
				</li>
				<li class="menu-item">
					<a href="#0">Kabobs</a>
				</li>
				<li class="menu-item">
					<a href="denglu.html">Contact</a>
				</li>
			</ol>
		</nav>
		<div class="container">
		<header class="codrops-header">
			<h1>Speed Dial</h1>
		</header>
		<section class="grid-wrap">
			<ul class="grid swipe-rotate loaded" id="grid" style="position: relative; width: 1256px; height: 2623px;">
				<li class="shown" style="position: absolute; left: 0px; top: 0px;">
					<a href="#0"><img src="img/photo/1.jpg" alt="img01">
						<h3>Kenpo News April 2014 issue</h3></a>
				</li>
				<li class="shown" style="position: absolute; left: 314px; top: 0px;">
					<a href="#0"><img src="img/photo/2.jpg" alt="img02">
						<h3>SQUET April 2014 issue</h3></a>
				</li>
				<li class="shown" style="position: absolute; left: 628px; top: 0px;">
					<a href="#0"><img src="img/photo/3.jpg" alt="img03">
						<h3>MONOCLE issue 72</h3></a>
				</li>
				<li class="shown" style="position: absolute; left: 942px; top: 0px;">
					<a href="#0"><img src="img/photo/4.jpg" alt="img04">
						<h3>TOWN Winter 2013</h3></a>
				</li>
				<li class="shown" style="position: absolute; left: 628px; top: 238px;">
					<a href="0"><img src="img/photo/5.jpg" alt="img05">
						<h3>Quarterly Musashino autumn of 2013 issue</h3></a>
				</li>
				<li class="shown" style="position: absolute; left: 0px; top: 399px;">
					<a href="#0"><img src="img/photo/6.jpg" alt="img06">
						<h3>MONOCLE issue 69</h3></a>
				</li>
				<li class="shown" style="position: absolute; left: 942px; top: 434px;">
					<a href="#0"><img src="img/photo/7.jpg" alt="img07">
						<h3>Real Simple May 2014</h3></a>
				</li>
				<li class="shown" style="position: absolute; left: 314px; top: 435px;">
					<a href="#0"><img src="img/photo/8.jpg" alt="img08">
						<h3>The 65th Book Week</h3></a>
				</li>
				<li class="shown" style="position: absolute; left: 628px; top: 609px;">
					<a href="#0"><img src="img/photo/9.jpg" alt="img09" style="animation-delay: 349.312ms;">
						<h3 style="animation-delay: 349.312ms;">Real Simple May 2014</h3>
						<div class="curtain" style="background: rgb(93, 154, 153); animation-delay: 349.312ms;"></div>
					</a>
				</li>
				<li class="shown" style="position: absolute; left: 0px; top: 656px;">
					<a href="#0"><img src="img/photo/10.jpg" alt="img10" style="animation-delay: 43.3955ms;">
						<h3 style="animation-delay: 43.3955ms;">Quarterly Musashino spring of 2014 issue</h3>
						<div class="curtain" style="background: rgb(194, 83, 73); animation-delay: 43.3955ms;"></div>
					</a>
				</li>
				<li class="shown" style="position: absolute; left: 942px; top: 727px;">
					<a href="#0"><img src="img/photo/11.jpg" alt="img11" style="animation-delay: 306.432ms;">
						<h3 style="animation-delay: 306.432ms;">MAJESTY express vol. 01</h3>
						<div class="curtain" style="background: rgb(216, 202, 97); animation-delay: 306.432ms;"></div>
					</a>
				</li>
				<li class="shown" style="position: absolute; left: 314px; top: 869px;">
					<a href="#0"><img src="img/photo/12.jpg" alt="img12" style="animation-delay: 74.8885ms;">
						<h3 style="animation-delay: 74.8885ms;">Shitamachi Rocket</h3>
						<div class="curtain" style="background: rgb(64, 89, 113); animation-delay: 74.8885ms;"></div>
					</a>
				</li>
				<li class="shown" style="position: absolute; left: 628px; top: 994px;">
					<a href="#0"><img src="img/photo/13.jpg" alt="img13" style="animation-delay: 105.823ms;">
						<h3 style="animation-delay: 105.823ms;">Quarterly Musashino winter of 2013 issue</h3>
						<div class="curtain" style="background: rgb(232, 57, 21); animation-delay: 105.823ms;"></div>
					</a>
				</li>
				<li class="shown" style="position: absolute; left: 0px; top: 1027px;">
					<a href="#0"><img src="img/photo/14.jpg" alt="img14" style="animation-delay: 202.329ms;">
						<h3 style="animation-delay: 202.329ms;">MAINICHI CHUUGOKUGO April 2014</h3>
						<div class="curtain" style="background: rgb(231, 230, 229); animation-delay: 202.329ms;"></div>
					</a>
				</li>
				<li class="shown" style="position: absolute; left: 942px; top: 1125px;">
					<a href=#0"><img src="img/photo/1.jpg" alt="img01" style="animation-delay: 382.02ms;">
						<h3 style="animation-delay: 382.02ms;">Kenpo News April 2014 issue</h3>
						<div class="curtain" style="background: rgb(255, 254, 255); animation-delay: 382.02ms;"></div>
					</a>
				</li>
				<li class="shown" style="position: absolute; left: 0px; top: 1267px;">
					<a href=#0"><img src="img/photo/12.jpg" alt="img02" style="animation-delay: 254.896ms;">
						<h3 style="animation-delay: 254.896ms;">SQUET April 2014 issue</h3>
						<div class="curtain" style="background: rgb(236, 113, 125); animation-delay: 254.896ms;"></div>
					</a>
				</li>
				<li class="shown" style="position: absolute; left: 314px; top: 1306px;">
					<a href="#0"><img src="img/photo/13.jpg" alt="img03" style="animation-delay: 369.915ms;">
						<h3 style="animation-delay: 369.915ms;">MONOCLE issue 72</h3>
						<div class="curtain" style="background: rgb(6, 63, 123); animation-delay: 369.915ms;"></div>
					</a>
				</li>
				<li class="shown" style="position: absolute; left: 628px; top: 1365px;">
					<a href="#0"><img src="img/photo/14.jpg" alt="img04" style="animation-delay: 141.856ms;">
						<h3 style="animation-delay: 141.856ms;">TOWN Winter 2013</h3>
						<div class="curtain" style="background: rgb(247, 214, 74); animation-delay: 141.856ms;"></div>
					</a>
				</li>
				<li style="position: absolute; left: 942px; top: 1524px;">
					<a href="#0"><img src="img/photo/5.jpg" alt="img05" style="animation-delay: 274.324ms;">
						<h3 style="animation-delay: 274.324ms;">Quarterly Musashino autumn of 2013 issue</h3>
						<div class="curtain" style="background: rgb(253, 213, 12); animation-delay: 274.324ms;"></div>
					</a>
				</li>
				<li class="shown" style="position: absolute; left: 314px; top: 1544px;">
					<a href="#0"><img src="img/photo/6.jpg" alt="img06" style="animation-delay: 146.212ms;">
						<h3 style="animation-delay: 146.212ms;">MONOCLE issue 69</h3>
						<div class="curtain" style="background: rgb(232, 73, 50); animation-delay: 146.212ms;"></div>
					</a>
				</li>
				<li style="position: absolute; left: 0px; top: 1702px;">
					<a href="#0"><img src="img/photo/7.jpg" alt="img07" style="animation-delay: 97.744ms;">
						<h3 style="animation-delay: 97.744ms;">Real Simple May 2014</h3>
						<div class="curtain" style="background: rgb(80, 156, 161); animation-delay: 97.744ms;"></div>
					</a>
				</li>
				<li style="position: absolute; left: 628px; top: 1799px;">
					<a href="#0"><img src="img/photo/8.jpg" alt="img08" style="animation-delay: 329.769ms;">
						<h3 style="animation-delay: 329.769ms;">The 65th Book Week</h3>
						<div class="curtain" style="background: rgb(192, 176, 22); animation-delay: 329.769ms;"></div>
					</a>
				</li>
				<li style="position: absolute; left: 314px; top: 1801px;">
					<a href="#0"><img src="img/photo/9.jpg" alt="img09" style="animation-delay: 74.4279ms;">
						<h3 style="animation-delay: 74.4279ms;">Real Simple May 2014</h3>
						<div class="curtain" style="background: rgb(93, 154, 153); animation-delay: 74.4279ms;"></div>
					</a>
				</li>
				<li style="position: absolute; left: 942px; top: 1895px;">
					<a href="#0"><img src="img/photo/10.jpg" alt="img10" style="animation-delay: 43.4153ms;">
						<h3 style="animation-delay: 43.4153ms;">Quarterly Musashino spring of 2014 issue</h3>
						<div class="curtain" style="background: rgb(194, 83, 73); animation-delay: 43.4153ms;"></div>
					</a>
				</li>
				<li style="position: absolute; left: 0px; top: 1995px;">
					<a href="#0"><img src="img/photo/11.jpg" alt="img11" style="animation-delay: 114.005ms;">
						<h3 style="animation-delay: 114.005ms;">MAJESTY express vol. 01</h3>
						<div class="curtain" style="background: rgb(216, 202, 97); animation-delay: 114.005ms;"></div>
					</a>
				</li>
				<li style="position: absolute; left: 314px; top: 2186px;">
					<a href="#0"><img src="img/photo/12.jpg" alt="img12" style="animation-delay: 321.457ms;">
						<h3 style="animation-delay: 321.457ms;">Shitamachi Rocket</h3>
						<div class="curtain" style="background: rgb(64, 89, 113); animation-delay: 321.457ms;"></div>
					</a>
				</li>
				<li style="position: absolute; left: 628px; top: 2233px;">
					<a href="#0"><img src="img/photo/13.jpg" alt="img13" style="animation-delay: 367.528ms;">
						<h3 style="animation-delay: 367.528ms;">Quarterly Musashino winter of 2013 issue</h3>
						<div class="curtain" style="background: rgb(232, 57, 21); animation-delay: 367.528ms;"></div>
					</a>
				</li>
				<li style="position: absolute; left: 942px; top: 2266px;">
					<a href="#0"><img src="img/photo/14.jpg" alt="img14" style="animation-delay: 175.377ms;">
						<h3 style="animation-delay: 175.377ms;">MAINICHI CHUUGOKUGO April 2014</h3>
						<div class="curtain" style="background: rgb(231, 230, 229); animation-delay: 175.377ms;"></div>
					</a>
				</li>
			</ul>
		</section>
	    
		</div>
		
		<div class="footer-banner" style="width:728px; margin:160px auto 100px"></div>
		<script type="text/javascript" src="js/masonry.pkgd.min.js"></script>
		<script type="text/javascript" src="js/imageloaded.pkgd.min.js"></script>
		<script src="js/classie.js"></script>
		<script src="js/colorfinder.js"></script>
		<script src="js/GridScrollFx.js"></script>
	<script>

			new GridScrollFx( document.getElementById( 'grid' ), {

				viewportFactor : 0.4

			} );

	</script>
	<script src="http://www.jq22.com/jquery/1.7.2/jquery.min.js"></script>
	<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
	
	</body>

</html>